import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';


Vue.use(Vuex); //vue 加载vuex模块


//定义对象state状态
const state = {
    count: 1,
    products: {
        date: '2020-7-2 11:30',
        name: 'apple',
        seller: 'jd',
        price: '￥5000',
        addr: '广州天河',
        num: 12,
        color: 'red'
    },
    them: []
}

//state数据输出前调用
const getters = {
    count(state) {
        return state.count += 10; //不管调用的是add ，还是reduce，都会调用到
    }
}

//同步请求，改变state
//mutations 里的方法，可当做当前对象的commit()方法参数
const mutations = {
    add: (state, n) => {
        state.count += n;
    },
    reduce(state) {
        state.count--;
    },
    ggthem(state) {
        axios.get('http://localhost/')
            .then(function(res) {
                state.them = res.data
                console.log('from store :')
                console.log(state.them)
            })
            .catch(function(error) {
                console.log(error)
            })
    }
}


// 异步请求，改变state
// 在组件中，可用dispatch调用，如 this.$store.dispatch('addAction');  
const actions = {
    addAction(context) { // context上下文对象，这里可以理解称store本身
        context.commit('add', 10);
        console.log('3s后异步调用reduce.')
        setTimeout(() => {
            context.commit('reduce');
            console.log('在addAction中异步调用reduce..')
        }, 3000);
    },
    reduceAction({ commit }) { // 直接把commit对象解构出来，可以让方法体逻辑和代码更清晰明了
        commit('reduce');
    },
    themAction({ commit }) {
        commit('ggthem');
    }

}


export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})